<template>
  <!-- 历史评价结果 -->
  <baseslot>
    <template v-if="nowselectpage === 1" v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">评价时间:</div>
        <div class="input">
          <el-date-picker
            v-model="searchList.date"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            clearable
            :picker-options="pickerOptions"
          />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" @click="search()" />
      </div>
    </template>
    <template v-slot:content>
      <!-- 表格页面 -->
      <div v-if="nowselectpage === 1" class="zh-table-box">
        <el-table
          ref="tableData"
          v-loading="loading"
          highlight-current-row
          :data="tableData"
          stripe
          border
          height="88%"
          @row-click="handleEdit"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="evaluationIndexId" label="评价指标">
            <template slot-scope="scope">
              {{ getevalname(scope.row.evaluationIndexId) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="历史结果名称" />
          <el-table-column prop="totalScore" label="总分">
            <template slot-scope="scope">
              {{ scope.row.totalScore }}分
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" plain @click="getmessagemet(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>
      <!-- 详情页面 -->
      <div v-if="nowselectpage === 2" class="zh-message-box">
        <div class="message-box-top">
          <div class="box-top-lineone">
            <!-- 主体信息得分 28分 -->
            <topnewbar :nowbarcontent="nowbarcontent" />
          </div>
          <div class="box-top-linetwo">
            <el-button type="success" plain @click="backpagemet()">返回</el-button>
          </div>
        </div>
        <div class="message-box-contain">
          <!-- <div class="message-box-contain-title">主体信息各项评分详情</div> -->
          <div v-if="false" class="message-box-contain-main">
            <div class="message-box-contain-main-item">统一社会信用代码(主体个人身份证):<span class="main-item-fenshu">3分</span> </div>
            <div class="message-box-contain-main-item">主体名称:<span class="main-item-fenshu">3分</span></div>
            <div class="message-box-contain-main-item">法人代表（生产者）:<span class="main-item-fenshu">3分</span></div>
            <div class="message-box-contain-main-item">主体类别:<span class="main-item-fenshu">3分</span></div>
            <div class="message-box-contain-main-item">种养种类:<span class="main-item-fenshu">3分</span></div>
            <div class="message-box-contain-main-item">地理坐标:<span class="main-item-fenshu">3分</span></div>
            <div class="message-box-contain-main-item">产品种养规模:<span class="main-item-fenshu">3分</span></div>
            <div class="message-box-contain-main-item">产品种类:<span class="main-item-fenshu">3分</span></div>
          </div>
          <el-table
            :data="historylist"
            class="table_content"
            height="calc(100% - 100px)"
            border
            :row-class-name="tableRowClassName"
            :span-method="objectSpanMethod"
            :header-cell-style="headerColor"
            style="width:100%"
          >
            <el-table-column
              label="指标名称"
              prop="evaluationIndexName"
              :show-overflow-tooltip="true"
              align="center"
            >
              <!-- //产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉） -->
              <template slot-scope="scope">
                <div
                  style="width:180px !important"
                  :style="
                    'height:' +
                      scope.row.evaluationIndexNamecount * 40 +
                      'px;line-height:' +
                      scope.row.evaluationIndexNamecount * 40 +
                      'px'
                  "
                  :class="
                    scope.row.evaluationIndexNamenumber % 2 === 0
                      ? 'blue text_ellipsis'
                      : 'white text_ellipsis'
                  "
                >
                  {{ scope.row.evaluationIndexName }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="evaluationContent"
              label="评分内容"
              :show-overflow-tooltip="true"
            >
              <!-- //评分标准同指标使用插槽原因一样 -->
              <template slot-scope="scope">
                <div
                  :style="
                    'height:' +
                      scope.row.evaluationContentIdcount * 40 +
                      'px;'
                  "
                  :class="
                    scope.row.evaluationContentIdnumber % 2 === 0
                      ? 'white text_ellipsis'
                      : 'blue text_ellipsis'
                  "
                >
                  {{ scope.row.evaluationContent }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="technical"
              align="center"
              label="评价标准"
            />
            <el-table-column
              prop="deduction"
              width="140"
              align="center"
              :show-overflow-tooltip="true"
              label="评价分数"
            >
              <template slot-scope="scope">
                <div style="width:120px !important">
                  {{ scope.row.deduction }}分/项
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="result"
              align="right"
              :show-overflow-tooltip="true"
              label="实际结果"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.result">符合</div>
                <div v-if="!scope.row.result">不符合</div>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              align="right"
              prop="finallyScore"
              label="实际评分"
            >
              <template slot-scope="scope">
                {{ scope.row.finallyScore }}分
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
  </baseslot>
</template>

<script>
import nowpagereq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-result-history/index"
import baseslot from "@/components/BaseMainSlot/baseone.vue"
import Pagination from "@/components/Pagination";
import topnewbar from "../components/topnewbar.vue"
import { mymixin } from "@/utils/mixin"
export default {
  name: "EvaluationResultHistory",
  components: { baseslot, Pagination, topnewbar },
  mixins: [mymixin],
  data() {
    return {
      nowbarcontent: 895,
      historylist: [
        {
          // "evaluationIndexName": "主体信息", // 指标名称
          // "evaluationContentId": "1", // 主要用于评分内容归类
          // "evaluationContent": "基本信息应有:主体名称、统一社会信用代码(主体个人身份证)、生产地址（或注册地址）、主体类别、法人代表（生产者）、联系方式、地理坐标、种养类型、种养总规模（10分）",
          // "technical": "主体名称", // 评价标准
          // "deduction": "-2分/项", // 评价分数
          // "result": "不符合", // 实际结果
          // "finallyScore": "8" // 实际评分
        }
      ],
      // 当前选择的页面
      nowselectpage: 1,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      // 所有评价标准
      evallist: [],
      searchList: {
        date: ""
      }
    }
  },
  mounted() {
    this.getTableDataList()
    this.getevallist()
  },
  methods: {
    getTableDataList() {
      // console.log("获取表格信息")
      // this.loading = false
      let params = {
        "createTime": ""
      }
      if (this.searchList.date) {
        params.createTime = this.dateToFormat(this.searchList.date)
      }
      nowpagereq.getlist(params).then(
        res => {
          this.loading = false
          this.tableData = res.data
          this.totalSize = res.data.length
        }
      )
    },
    // 获取指标名称列表
    getevallist() {
      nowpagereq.getevalname().then(
        res => {
          this.evallist = res.data
        }
      )
    },
    getevalname(id) {
      let name = ""
      this.evallist.forEach(
        item => {
          if (item.evaluationIndexId === id) {
            name = item.evaluationIndexName
          }
        }
      )
      return name
    },
    // 点击查看详细信息
    getmessagemet(e) {
      this.nowbarcontent = e.totalScore
      this.nowselectpage = 2
      nowpagereq.gethistorylist(e.indexResultId).then(
        res => {
          let listone = res.data
          // if (listone.length > 0) {
          this.historylist = this.listHandle(listone)
          // }
          // this.historylist = res.data
        }
      )
    },
    // 返回表格页面
    backpagemet() {
      this.nowselectpage = 1
    },
    // 搜素方法
    search() {
      this.getTableDataList()
      // console.log(this.searchList)
    },
    // 表格选中方法
    handleEdit() {

    },
    // 表格选择方法
    handleSelectionChange() {

    },
    // 选择页面size
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    // 选择页面page
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    async save() {
    },
    // -----单元合并处理相关-------
    // 合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 找到第一列
      if (columnIndex === 0) {
        // evaluationIndexNamecount是需要合并的字段（这里第一列合并的字段是evaluationIndexNamecount，evaluationIndexNamecount是经过this.$listHandle处理过的数据，是主体信息的合并的个数）
        // 如果合并的个数大于1的话
        if (row.evaluationIndexNamecount > 1) {
          return {
            rowspan: row.evaluationIndexNamecount,
            colspan: 1
          };
        } else if (row.evaluationIndexNamecount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第二列与第一列同理
      //   if (columnIndex === 1) {
      //     if (row.evaluationContentcount > 1) {
      //       return {
      //         rowspan: row.evaluationContentcount,
      //         colspan: 1
      //       };
      //     } else if (row.evaluationContentcount === 1) {
      //       return {
      //         rowspan: 1,
      //         colspan: 1
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      //   }
      if (columnIndex === 1) {
        if (row.evaluationContentIdcount > 1) {
          return {
            rowspan: row.evaluationContentIdcount,
            colspan: 1
          };
        } else if (row.evaluationContentIdcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第六列与第一列同理
      if (columnIndex === 5) {
        if (row.evaluationContentIdcount > 1) {
          return {
            rowspan: row.evaluationContentIdcount,
            colspan: 1
          };
        } else if (row.evaluationContentIdcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 表格头部颜色
    headerColor({ rowIndex, columnIndex }) {
      return this.headerColormetod(rowIndex);
    },
    // 改变合计那一行的背景色
    tableRowClassName({ row, rowIndex }) {
      if (row.technical === "合计") {
        return "hang";
      }
      return this.tableRowClassNamemethodes(rowIndex);
    },
    // 转化下请求回来的数据
    listHandle(list) {
      for (var key in list[0]) {
        var k = 0;
        var j = 0;
        while (k < list.length) {
          list[k][key + "count"] = 1;
          list[k][key + 'number'] = j;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][key] === list[i][key] && list[k][key] !== "") {
              list[k][key + "count"]++;
              list[i][key + "count"] = 0;
              list[i][key + 'number'] = j;
            } else {
              break;
            }
          }
          j++
          k = i;
        }
      }
      return list;
    },
    headerColormetod(rowIndex) {
      if (rowIndex === 0) {
        return { background: "#006e91", color: "#fff" };
      } else {
        return { background: "#bd1a1a", color: "#fff" };
        // return { color: "#fff" };
      }
    },
    // 斑马条纹（bg和bgnone为类名，可以在类名写样式）
    tableRowClassNamemethodes(rowIndex) {
      if (rowIndex % 2 === 0) {
        return "bg";
      } else {
        return "bgnone";
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.zh-table-box{
  width: 100%;
  height: 100%;
}
.zh-message-box{
  width: 100%;
  height: 100%;
  .message-box-top{
    width: 90%;
    margin-left: 4.5%;
    height: 50px;
    // background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box-top-lineone{
      // width: 200px;
      height: 50px;
      line-height: 50px;
      // background-color: aqua;
      font-size: 18px;
      white-space: nowrap;
      text-align: left;
    }
  }
  .message-box-contain{
    margin: 45px 5%;
    width: 90%;
    height: calc(100% - 70px);
    // background-color: #004558;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    .message-box-contain-title{
      width: 100%;
      height: 50px;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      text-align: center;
      line-height: 50px;
      font-weight: 600;
      font-size: 19px;
      background-color: #004e65;
    }
    .message-box-contain-main{
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      // justify-content: space-between;
      .message-box-contain-main-item{
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        .main-item-fenshu{
          background-color: #003e4f;
          width: 100px;
          height: 40px;
          text-align: center;
          padding-left: 10px;
          padding-right: 10px;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
// 单元格样式
::v-deep .el-table__body{
  height:auto !important;
}
.text_ellipsis{
    white-space: pre-wrap;
    width: 80px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}
::v-deep .el-table .hang {
  background: #970b84;
  font-weight: bold;
//   color:#bd1a1a;
}
.blue {
//   background: #0cc415;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
.white {
//   background: #bd1a1a;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
::v-deep .el-table__body tr.current-row > td {
  background-color: #15a0ca00 !important;
}
</style>
